<template>
    <div class="hcontent">
        <h3>{{imgDetails.title}}</h3>
        <p class="time"><span>发表时间:{{imgDetails.add_time|timeformat}}</span><span>点击{{imgDetails.click}}次</span></p>
        <hr>
        <div class="imgContent" >
			<!--使用mui方法制作预览图
            <div class="imglist mui-content-padded">
                <img  v-for="(item,i) in imgList " :key="i" :src="item.src" data-preview-src="" data-preview-group="1" />
            </div>
			-->
			<div class="imglist">
				<vue-preview :slides="imgList"></vue-preview>
            </div>
			<div class="icontent" v-html="imgDetails.content">

            </div>
        </div>
        <comment :id="id"></comment>
    </div>

</template>
<script>

import comment from "../news/list/coment.vue"

export default {

    data(){
        return{
            imgDetails:{},
            imgList:[]
        }
    },
    methods:{
        async getimgDetails(){
           
           const {data} =await this.axios.get("/api/getimageInfo/" + this.id);
           if(data.status===0){
                this.imgDetails=data.message[0];
                console.log(data.message);
           }
        },
        async getimgList(){
           
           const {data} =await this.axios.get("/api/getthumimages/" + this.id);
           if(data.status===0){
				data.message.forEach(item => {
						item.w=300;
						item.h=300;
						item.src=item.src
						item.msrc=item.src
						item.title="我是图片"
				});
				this.imgList=data.message;
           }
        }
    },
    created(){
        this.getimgDetails();
		this.getimgList();
		 //初始化 预览图 
		//this.mui.previewImage();
    },
    components:{
        comment
	},
    props:["id"]
}
</script>

<style scoped>


.hcontent h3{
    font-size: 15px;
    text-align: center;
    color: #26a2ff;
    margin: 15px 0;
}
.hcontent{
    border: 1px solid #fff;
}
.time{
    color:#8f8f94;
    display: flex;
    justify-content: space-between;
}
.icontent{
    font-size: 13px;
    line-height: 30px;
}
/*图片缩放类*/

</style>